<template>
	<div>
		<h2>电子时钟</h2>
		<p>{{ currentTime.toLocaleTimeString() }}</p>
	</div>
</template>

<script setup>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue'
const currentTime = ref(new Date())
let timer = null

onMounted(() => {
	timer = setInterval(() => {
		currentTime.value = new Date()
	}, 1000)
})

onUpdated(()=>{
    console.log('更新时间',currentTime.value);
})

onUnmounted(()=>{
    clearInterval(timer)
})


</script>

<style lang="css" scoped></style>
